先前完成的內容，商品價格的顯示還不夠完整，應該還要在前面加入幣值符號，因考量到多處都需要加上，可以使
用 filters 來完成，filters 使用的方法如下:

<!-- in mustaches -->
{{ price | currency }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

透過使用 | 符號 (pipe)，在後面加入 filters 名稱，也可以使用多個 filters 來處理資料

{{ message | filterA | filterB }}

定義 filters 的方式如同 components，可以在單個 component 引用，或是透過 Vue.filter 註冊，這裡我們考量幣值符號顯示 filter 會在多個頁面顯示，所以我們以全域的方式註冊；
先在 src 底下新增一個 filters 資料夾，並在該資料夾底下新增 Currency.js 檔案:

export default function(value) {
return `$ ${value}`;
}

然後在 main.js 全域註冊，注意：必須加在宣告 Vue App Instance 前

import Currency from './filters/Currency';
...
Vue.filter('currency', Currency);
new Vue({ ... });

最後在需要使用到 filter 的地方使用 pipe | 符號

<span class="product-price">{{ item.price | currency }}</span>